<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>首页</title>

  <!-- weui -->
  <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.3.0/weui.min.css" />
</head>

<body>
  <header>
    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide bg1"></div>
        <div class="swiper-slide bg2"></div>
        <div class="swiper-slide bg3"></div>
      </div>

  </header>
  <main>
    <ul class="paixu">
      <li>
        <div class="ranking">
          <div>今日排名</div>
          <p id="rankingVal"></p>
        </div>
      </li>
      <li>
        <div class="punch">
          <span id="clockVal"></span>
          <button id="clockbtn"></button>
        </div>
      </li>
      <li>
        <div class="datas">
          <p>运动数据</p>
        </div>
      </li>
      <li>
        <div class="badge">
          <div>累积运动徽章</div>
          <p><span id="badgesVal"></span>枚</p>
        </div>
      </li>
      <li>
        <div class="drill">
          <p>课程训练</p>
        </div>
      </li>
      <li>
        <div class="runs">
          <p>户外跑步</p>
        </div>
      </li>
    </ul>

  </main>
 
  <!-- weui -->
  <script src="https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js" charset="utf-8"></script>
</body>

</html>